<script setup lang="ts">
	import { ref } from 'vue';
	import { ComCustomTab } from '../../types/com-custom-tab';
	defineProps({
		tabs: {
			type: Array<ComCustomTab>,
			required: true
		},
	})
	const selectedIndex = ref(0)
	const emits = defineEmits(['changeTabIndex'])
	const switchTabIndex = (index : number) => {
		selectedIndex.value = index
		emits('changeTabIndex', index)
	}
</script>
<template>
	<view class="tab-bar">
		<view v-for="(tab,index) in tabs" :key="index" class="tab-item"
			:class="{'selected-tab': selectedIndex === index}" @click="switchTabIndex(index)">
			<view class="tab">
				<i :class="`iconfont ${tab.icon}`"></i>
				<text>{{tab.label}}</text>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
	@import "@/static/font/iconfont.css";

	.tab-bar {
		display: flex;
		flex-direction: row;
		border-bottom: 1rpx solid #e8e8e8;

		.tab-item {
			margin: 15rpx 30rpx;
			color: #959595;

			.tab {
				font-size: $font-size-24;
				display: flex;
				gap: 5rpx;
				flex-direction: row;
				align-items: center;

				.iconfont {
					font-size: $font-size-24;
				}
			}
		}

		.selected-tab {
			color: black;
		}
	}
</style>